<template>
  <div class="swiper_wrapper">
    <swiper class="swiper">
      <swiper-slide>
        <img class="my_swiper_imgs"
             src="../../../assets/picture/banner.png "
             alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="my_swiper_imgs"
             src="../../../assets/picture/banner.png "
             alt="" />
      </swiper-slide>
  </div>
</template>
<script>
import { reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
export default {
  name: "MySwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup () {
    const swiper_options = reactive({
    });
    return { swiper_options };
  },
};
</script>

<style lang="scss" scoped>
.swiper_wrapper {
  height: 0;
  overflow: hidden;
  padding-bottom: 40%;
  .my_swiper_imgs {
    width: 100%;
  }
}
</style>